<template>
  <div>
    <x-header title="订单操作记录" style="background-color: #33bb99;width:100%;position: fixed;top:0;z-index: 99;">
      <span slot="overwrite-left" @click="back" class="iconfont icon-shangyiyedanjiantou" style="color: #fff;font-size: 22px;"></span>
    </x-header>
    <div style="width: 100%;margin: 45px auto 0;position: fixed">
      <!--<div class="title">-->
        <!--<span style="width: 20%">操作人</span>-->
        <!--<span>操作类型</span>-->
        <!--<span style="width: 30%;">操作内容</span>-->
        <!--<span>创建时间</span>-->
      <!--</div>-->
      <div class="order-text">
        <scroller lock-x height="93%" @on-scroll-bottom="onScrollBottom" ref="scrollerBottom" :scroll-bottom-offst="200">
          <div class="box2">
            <div class="title text" v-for="v in dataList">
              <div><i class="fa fa-user-o"></i><span>{{v.create_user_name}}：{{v.type | paymentState}}</span></div>
              <!--<div>操作类型：{{v.type | paymentState}}</div>-->
              <div><i class="fa fa-edit"></i> <span>{{v.content}}</span></div>
              <div><i class="fa fa-clock-o"></i> <span>{{v.create_time}}</span></div>
            </div>
          </div>
        </scroller>
      </div>
    </div>
  </div>
</template>

<script>
  import { Scroller, XTable } from 'vux'
    export default {
      name: "",
      components:{
        Scroller, XTable
      },
      props:['detail'],
      data () {
        return {
          start:1,
          dataList:[],
          pageSize: 0,
          totalPage: 0,
          totalRow: 0,
        }
      },
      created(){

        console.log(this.detail)
        this.getOrderLog()
      },
      methods:{
        // 分页获取订单列表
        getOrderLog(){
          this.$vux.loading.show();
          this.config0.get('/supply/appLog/findOrderLogPage', {
            start:this.start,
            startTime:'',
            endTime:'',
            order_no:this.detail.order_no,
            purchasers_id:'',
          }).then(res=>{
            this.$vux.loading.hide();
            if(res.data.code==='0'){
              $.each(res.data.page.list,(index,item)=>{
                this.dataList.push(item)
              })
              this.pageSize = res.data.pageSize,
                this.totalPage = res.data.totalPage,
                this.totalRow = res.data.totalRow,
                this.isShow = true
            }else{
              this.msg(this.config0.handleError(res.data));
            }
          })
        },
        // scroll
        onScrollBottom () {
          if (this.onFetching) {
            // do nothing
          } else {
            this.onFetching = true
            setTimeout(() => {
              // this.bottomCount += 10
              this.start += 1
              this.getOrderLog()
              this.$nextTick(() => {
                this.$refs.scrollerBottom.reset()
              })
              this.onFetching = false
            }, 2000)
          }
        },
        // 信息提示
        msg(str){
          this.$vux.toast.show({
            type: 'text',
            text: str,
            position: 'default',
            time: 800,
          });
        },
        // 返回
        back(){
          this.$emit('toOrder',false);
        },
      },

      filters: {
        paymentState(value) {
          let str = '';
          if (value === '0') {
            str = '开单';
          }
          if (value === '1') {
            str = '确认/驳回订单';
          }
          if (value === '2') {
            str = '发货';
          }
          if (value === '3') {
            str = '签收';
          }
          if (value === '4') {
            str = '退货';
          }
          if (value === '5') {
            str = '通过/驳回退货';
          }
          if (value === '6') {
            str = '取消订单';
          }
          if (value === '7') {
            str = '通过/驳回取消';
          }
          return str;
        },
      }
    }
</script>

<style scoped lang="less">
@import "../../../assets/css/font_975465_4qn59qnejbp/iconfont.css";
  .title{
    font-weight: 300;
    background: #f9f9f9;
    border-bottom:1px #e1e1e1 solid;
    padding: 0.5rem 0;
    >div{
      display: flex;
      padding: 0 1rem;
      font-size: 0.8rem;
      line-height: 1.5rem;
      >.fa{width: 1.5rem;color: #33bb99;line-height: 1.5rem;font-weight: 300;}
    }
  }
.text{
  background: #fff;
}
.order-text{
  height:100%;
  position: fixed;
  top:50px;
  bottom: 0px;
  width: 100%;
  padding-bottom:50px;
}
</style>
